<!-- 维保详情 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true" :isrefresh="true">
			<block style="color: #777777;font-size: 48rpx;" slot="content">维保详情</block>
		</cu-custom>
		<view class="content">
			<ul>
				<li>
					<text>任务名称：{{title}}</text>
				</li>
				<li>
					<text>维保人员：{{wbry}}</text>
				</li>
				<li>
					<text>业主名称：{{yzmc}}</text>
				</li>
				<li>
					<text>维保企业：{{wbqy}}</text>
				</li>
				<li>
					<text>任务状态：{{rwzt}}</text>
				</li>
			</ul>
		</view>

		<!-- 		<view class="all_desc">
			<text>还需巡检触发 47 个年度维保设备</text>
		</view> -->
		<view>
			<view class="zj">
				<view>检查设备：已完成 <text class="title_big">{{ywc}}</text> 个 / 需要完成 <text class="title_big">{{xwc}}</text> 个
				</view>
				<uni-icons @click="close" class="close" :type="iconStyle" size="16"></uni-icons>
			</view>
			<view :style="pShow ? '' : 'display:none;'" class="detail">
				<view v-for="(item,index) in list1" :key="index">
					<text>{{item.name}}：已完成 {{item.zwcs}} 个 / 需要完成 {{item.xywcs}} 个</text>
					<button class="my-btn cu-btn bg-system-orange shadow uni-btn-small"
						@click="see_detail(item.inMaintenanceInfoDataList)">查看详情</button>
				</view>
			</view>
		</view>


		<view>
			<view class="zj">
				<view>月度维保任务</view>
				<uni-icons @click="close" class="close" :type="iconStyle" size="16"></uni-icons>
			</view>
			<view :style="pShow ? '' : 'display:none;'" class="detail">
				<view v-for="(item,index) in list2" :key="index">
					<text>{{item.month}}：已完成 {{item.overCount}} 个 / 需要完成 {{item.neddCount}} 个</text>
					<button class="my-btn cu-btn bg-system-orange shadow uni-btn-small"
						@click="see_detail(item.inMaintenanceInfoDataList)">查看详情</button>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="show">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">内容详情</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<t-table>
						<t-tr>
							<t-th>名称</t-th>
							<t-th>类型</t-th>
							<t-th>地址</t-th>
						</t-tr>
						<t-tr v-for="item in tableList" :key="item.id">
							<t-td>{{ item.name }}</t-td>
							<t-td>{{ item.type }}</t-td>
							<t-td>{{ item.address }}</t-td>
						</t-tr>
					</t-table>
				</view>
			</view>
		</view>

		<view class="padding flex flex-direction">
			<button class="cu-btn margin-tb-sm lg my-btn" @tap="submit">确认任务</button>
		</view>

	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		onLoad(option) {
			// 封装参数
			let params = {
				"ucId": option.ucId
			}
			let that = this
			// 请求数据
			let app = getApp()
			app.globalData.request({
				url: 'wx/maintenance/getInMaintenanceInfoVo',
				data: {
					...params
				}
			}).then(function(res) {
				console.info(res)
				that.title = res.data.data.title
				that.status = res.data.data.status
				that.wbry = res.data.data.userName
				that.yzmc = res.data.data.enterpriseName
				that.wbqy = res.data.data.maintenaceEnterpriseName
				that.rwzt = res.data.data.statusStr
				that.list1 = res.data.data.inMaintenanceInfoDataVoList
				that.list2 = res.data.data.inMonthDataVoList

				for (var i = 0; i < that.list1.length; i++) {
					let obj = that.list1[i]

					that.ywc += obj.zwcs
					that.xwc += obj.xywcs
				}



			}).catch(function(e) {

			})
		},
		data() {
			return {
				title: '',
				wbry: '',
				yzmc: '',
				wbqy: '',
				rwzt: '',
				list1: [],
				list2: [],
				pShow: false,
				iconStyle: 'top',
				show: '',
				tableList: [],
				ywc: 0,
				xwc: 0,
				status:0
			}
		},
		methods: {
			see_detail(data) {
				// this.show = "show"
				// this.tableList = data

				// 跳转
				uni.navigateTo({
					url: '../wbsblb/wbsblb?data='+data
				})
			},
			hideModal(e) {
				this.show = null
			},
			close() {
				this.pShow = !this.pShow;
				this.iconStyle = this.pShow ? 'bottom' : 'top'
			},
			submit() {
				if (this.submitId == "" || this.address == "") {
					uni.showToast({
						title: "数据不完整"
					})
					return;
				}
				let params = {
					"location": this.address,
					"ucId": this.submitId
				}
				// 生成报警信息
				let app = getApp()
				app.globalData.request({
					url: '/wx/firealarm/confirmFire',
					data: {
						...params
					}
				}).then(function(res) {
					let data = res.data.code
					if (data == 0) {
						uni.showToast({
							title: "报警成功"
						})
						uni.navigateBack({
							delta: 2
						});
					}

				}).catch(function(e) {})
			},
		}
	}
</script>

<style scoped>
	page {
		width: 100vw;
	}

	.content {
		margin-top: 24rpx;
		background-color: #FFFFFF;
	}

	ul li {
		list-style: none;
		margin: 0;
		padding: 0;
		margin-left: 24rpx;
		position: relative;
	}

	li text {
		font-size: 24rpx;
		color: #777777;
		line-height: 94rpx;
	}

	li::after {
		content: '';
		position: absolute;
		left: 2rpx;
		bottom: 0;
		right: 2rpx;
		height: 1px;
		background-color: #dcdcdc;
	}

	.all_desc {
		font-size: 24rpx;
		color: #333333;
		height: 110rpx;
		line-height: 110rpx;
	}

	.zj {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		background: #FFFFFF;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.detail {
		display: flex;
		flex-direction: column;

	}

	.detail text {
		line-height: 105rpx;
		font-size: 21rpx;
	}

	.detail button {
		float: right;
		width: 140rpx;
		height: 50rpx;
		background: #FABD50;
		box-shadow: 0 4px 14px 0 rgba(250, 189, 80, 0.50);
		border-radius: 6px;
		border-radius: 6px;

		font-size: 21rpx;
		color: #FFFFFF;
		margin-bottom: 20rpx;
		position: absolute;
		right: 0;
		bottom: 10rpx;

	}

	.detail view {
		margin: 10rpx 40rpx;
		border-bottom: 1px solid #CCCCCC;
		position: relative;
	}

	.title_big {
		color: #FABD50;
		font-size: 32rpx;
		font-weight: 600;
		display: inline-block;
		padding: 0 12rpx;
	}

	.close {
		width: 80rpx;
	}

	.my-btn {
		height: 94rpx;
		margin-top: 80px;
		background-image: linear-gradient(90deg, #FAB53A 4%, #EFA21A 99%);
		box-shadow: 0 0 12px 0 rgba(250, 181, 58, 0.50);
		border-radius: 24px;
		ont-family: PingFangSC-Medium;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
	}

	.cu-modal {
		overflow-y: auto;
		position: fixed;
		top: 200px;
		right: 0;
		bottom: 200px;
	}
</style>
